body{
    margin:0;
    padding:0;
    height: 2500px;
    position: relative;
}

.box{
    position: absolute;
    left: 50%;
    top:5%;
    transform: translate(-50%,0%);
    width: 408px;
    height: 528px;
    /* outline: 1px solid red;; */
    /* outline: 1px solid red; */
    overflow: hidden;
}
.title{
    /* background-color: rgb(94, 155, 94); */
    height: 80px;
    text-align: center;
    background-image: url(../img/active_bg.png);
    background-position: right 0;
    transition: 0.5s;
    opacity: 0.8;
    
}
.title h2{
    margin: 0;
    line-height: 95px;
    color: white;
    
}
.box:hover .title{
    transform: translateY(-80px);
}
.box:hover>img{
    transform: scale(1.2);
}
.box>img{
    transition: 0.5s;
}

.box2{
    position: absolute;
    left: 50%;
    top:30%;
    transform: translate(-50%,0%);
    width: 408px;
    height: 528px;
    /* outline: 1px solid red;; */
    /* outline: 1px solid red; */
   
    background-color: rgb(235, 235, 235);
}
.floor{
    width: 408px;
    height: 528px;
    position: absolute;
    left: 0;
    bottom:0;
    box-sizing: border-box;
}
.one{
    padding: 60px 35px;
    z-index: 2;
    transition: 0.5s;
}
.tow{
    height: 551px;
    opacity:0;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    /* background-color: rgb(42, 165, 69); */

}
.box2:hover .tow{
    opacity: 1;
}
.box2:hover .one{
    color: white;
}
.box2:hover{
    background-color: #fff;
}